<template>
  <div class="about">
    <h1>x: {{x}}, y: {{y}}</h1>
    <hr>
    <h1 v-if="loading">正在请求中...</h1>
    <h1 v-else-if="errorMsg">{{errorMsg}}</h1>
    <img v-else :src="result[0].url" alt="dog">
  </div>
</template>

<script lang="ts">
import useMousePosition from '../hooks/useMousePosition'
import useUrlLoader from '../hooks/useUrlLoader'
import {
  watch
} from 'vue'

interface Dog {
  message: string
  status: string
}

interface Cat {
  id: string
  url: string
}

export default {

  setup () {
    const {x, y} = useMousePosition()

    // const {result,loading, errorMsg} = useUrlLoader<Dog>('https://dog.ceo/api/breeds/image/random')
    const {result,loading, errorMsg} = useUrlLoader<Cat[]>('https://api.thecatapi.com/v1/images/search')

    watch(result, (value) => {
      if (value) {
        console.log(value[0].url)
      }
      
    })
    
    return {
      x,
      y,
      result,
      loading, 
      errorMsg
    }
  }
}
</script>